<!DOCTYPE html>
<html>
	<head>
		<style>
			#app{
				height: 100%;
			}
			#_cards{
				width: 50%;
				height: 400px;
				margin: 0px auto;

			}
			._cardevery{
				margin: 0px auto;
				margin-top: 20px;
			}
		</style>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css" />
		<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
	</head>
	<body>
		<div id="app" >
			<div id="_cards">
				<el-card class="_cardevery" shadow="always" v-for="(comment,index) in commentVoList" :key="index">
					<el-form label-width="120px">
						<el-form-item label="单号：">
							<el-lable v-text="comment.orderId"></el-lable>
						</el-form-item>
						<el-form-item label="订单详情：">
							<el-lable v-text="comment.orderDetails"></el-lable>
						</el-form-item>
						<el-form-item label="用户id：">
							<el-lable v-text="comment.userId"></el-lable>
						</el-form-item>
						<el-form-item label="用户评价：">
							<el-lable v-text="comment.comments"></el-lable>
						</el-form-item>
						<el-form-item label="评分：">
							<el-rate
									v-model="value[index]"
									disabled
									show-score
									show-text="true"
									text-color="#ff9900"
									:texts="value[index]">
							</el-rate>

						</el-form-item>
						<el-form-item label="回复："  v-if="!comment.reply">
							<input type="text"
									  v-model="replies">
						</el-form-item>
						<el-form-item label="回复："  v-if="comment.reply">
							<el-input type="text" v-text="comment.reply"></el-input>
						</el-form-item>
						<el-form-item v-if="!comment.reply">
							<el-button type="primary" @click="submitForm(comment.id,replies)">回复</el-button>
							<el-button >取消</el-button>
						</el-form-item>
					</el-form>
				</el-card>
				<div class="block">
					<el-pagination
							@size-change="handleSizeChange"
							@current-change="getCommentAndReply"
							:current-page.sync="currentPage"
							:page-sizes="pageSizes"
							:page-size="currentSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="totalNumber">
					</el-pagination>
				</div>
			</div>
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					replies:'',
					value:[],
					pageSizes:[5, 20, 50, 100],
					currentSize:5,
					commentVoList:[],
					currentPage:1,
					pageSize:5,
					shopId:'',
					totalNumber:0,
				},
				methods: {
					submitForm(commentId,reply){
						let _this = this;
						$.post("/comment/reply",{commentId:commentId,reply:reply},function (data){
							if (data==="ok"){
								const h = this.$createElement;
								Vue.prototype.$message('评论已回复');
								_this.getCommentAndReply(_this.currentPage);
							}
						})
					}
					,
					handleSizeChange(pageSizes) {
						let _this = this;
						let param ={
							currentPage:_this.currentPage,
							pageSize: pageSizes,
							shopId:this.shopId
						}
						$.post("/comment/userComments",param,function (data) {
							console.log(data)
							_this.currentPage=data.pages;
							_this.pageSize=data.size;
							_this.commentVoList=data.records;
							_this.totalNumber = data.total;
						})
					},
					getCommentAndReply(currentPage){
						let id = JSON.parse(localStorage.getItem("shopId"));
						let _this = this;
						let param ={};
						if (currentPage===undefined){
							_this.shopId = id;
							param ={
								currentPage: 1,
								pageSize: _this.pageSize,
								shopId:id
							}

						}else {
							param ={
								currentPage: currentPage,
								pageSize: _this.pageSize,
								shopId:id
							}
						}
						$.post("/comment/userComments",param,function (data) {
							_this.currentPage=data.current;
							_this.pageSize=data.size;
							_this.commentVoList=data.records;
							_this.totalNumber = data.total;
							let values = [];
							let comment = data.records;
							for (let i = 0; i < comment.length; i++) {
								values.push(comment[i].grade);
							}
							_this.value=values;
						})
					}
				}
				,
				created(){
					this.getCommentAndReply();
				}
			});
		</script>
	</body>
</html>